<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
  		<form action="${param.action}" name="dms-regirstration-form" class="form formalize ${param.mode}" method="post">
    		<div class="section">
	    		<div class="input-item">
		    		<label><fmt:message key="msg.first-name"/></label>
		    		<input type="text" value="${user.firstName}" name="firstName" class="text-field required" placeholder='<fmt:message key="msg.input-your"/><fmt:message key="msg.first-name"/>' ${param.mode}/>
	    		</div>
	    		<div class="clear-both"></div>
	    		<div class="input-item">
		    		<label><fmt:message key="msg.last-name"/></label>
		    		<input type="text" value="${user.lastName}" name="lastName" class="text-field required" placeholder='<fmt:message key="msg.input-your"/><fmt:message key="msg.last-name"/>' ${param.mode}/>
	    		</div>
	    		<div class="clear-both"></div>
	    		<div class="input-item font-13">
		    		<label><fmt:message key="msg.gender"/></label>
		    		<div class="margin-top float-left capitalize">
		    			<input type="radio" name="gender" value="male" class="required float-left margin-right" <c:if test="${user.gender eq 'male'}">checked</c:if>  ${param.mode}/><div class="float-left margin-right-dbl"><fmt:message key="msg.male"/></div> 
		    		</div>
		    		<div class="margin-top float-left capitalize">
						<input type="radio" name="gender" value="female" class="float-left margin-right" <c:if test="${user.gender eq 'female'}">checked</c:if> ${param.mode}/><div class="float-left"><fmt:message key="msg.female"/></div> 
		    		</div>
	    		</div>
	    		<div class="clear-both"></div>
	    		<div class="input-item">
		    		<label class="no-transform"><fmt:message key="msg.date-of-birth"/></label>
		    		<input type="text" value='<fmt:formatDate pattern="MM/dd/yyyy" value="${user.dateOfBirth}"/>' name="dateOfBirth" class="text-field required date dateNotInFuture dob" placeholder='<fmt:message key="msg.input-your"/><fmt:message key="msg.date-of-birth"/>'  ${param.mode}/>
	    		</div>
	    		<div class="clear-both"></div>
	    		<div class="input-item">
		    		<label><fmt:message key="msg.language"/></label>
		    		<select name="language" class="float-left required" ${param.mode}>
		    			<option value=""><fmt:message key="msg.select-a"/> <fmt:message key="msg.language"/></option>
		    			<option value="English" <c:if test="${user.language eq 'English'}">selected</c:if>>English</option>
		    			<option value="Chinese"  <c:if test="${user.language eq 'Chinese'}">selected</c:if>>Chinese</option>
		    		</select>
	    		</div>
	   		</div>
	   		<div class="clear-both"></div>
	   		<div class="section">
	    		<div class="input-item">
		    		<label><fmt:message key="msg.address-1"/></label>
		    		<input type="text" value="${user.residentAddress.addressLine1}" name="residentAddress.addressLine1" id="addressLine1" class="text-field required" placeholder='<fmt:message key="msg.input-your"/><fmt:message key="msg.address"/>' ${param.mode}/>
	    		</div>
	    		<div class="input-item">
		    		<label><fmt:message key="msg.address-2"/></label>
		    		<input type="text" value="${user.residentAddress.addressLine2}" name="residentAddress.addressLine2" id="addressLine2" class="text-field" placeholder='<fmt:message key="msg.input-your"/><fmt:message key="msg.address"/>' ${param.mode}/>
	    		</div>
	    		<div class="input-item">
		    		<label><fmt:message key="msg.city"/></label>
		    		<input type="text" value="${user.residentAddress.city}" name="residentAddress.city" class="text-field required" placeholder='<fmt:message key="msg.input-your"/><fmt:message key="msg.city"/>' ${param.mode}/>
	    		</div>
	    		<div class="input-item">
		    		<label><fmt:message key="msg.state"/></label>
		    		<input type="text" value="${user.residentAddress.state}" name="residentAddress.state" class="text-field required" placeholder='<fmt:message key="msg.input-your"/> <fmt:message key="msg.state"/>' ${param.mode}/>
	    		</div>
	    		<div class="input-item">
		    		<label><fmt:message key="msg.zip-code"/></label>
		    		<input type="text" value="${user.residentAddress.zip}" name="residentAddress.zip" class="text-field digits required" minlength="5" maxlength="5" placeholder='<fmt:message key="msg.input-your"/><fmt:message key="msg.zip-code"/>' ${param.mode}/>
	    		</div>
	    		<div class="input-item">
		    		<label><fmt:message key="msg.phone-number"/></label>
		    		<input type="text" value="${user.phoneNumber}" name="phoneNumber" class="text-field required" placeholder='<fmt:message key="msg.input-your"/><fmt:message key="msg.work-phone"/>' ${param.mode}/>
	    		</div>	   		
    		</div>	   		
	   		<div class="clear-both"></div>
	   		<div class="section">
	    		<div class="input-item font-13">
		    		<label><fmt:message key="msg.user-type"/></label>
		    		<div class="margin-top float-left capitalize">
		    			<input type="radio" name="type" value="customer" class="required float-left margin-right" <c:if test="${user.gender eq 'male'}">checked</c:if>  ${param.mode}/><div class="float-left margin-right-dbl"><fmt:message key="msg.customer"/></div> 
		    		</div>
		    		<div class="margin-top float-left capitalize">
						<input type="radio" name="type" value="driver" class="float-left margin-right" <c:if test="${user.gender eq 'female'}">checked</c:if> ${param.mode}/><div class="float-left"><fmt:message key="msg.driver"/></div> 
		    		</div>
	    		</div>
	    		<div class="clear-both"></div>	   		
	    		<div class="input-item">
		    		<label><fmt:message key="msg.user-name"/> (<fmt:message key="msg.email"/>)</label>
		    		<input type="text" value="${user.userName}" id="userName" name="userName" class="text-field email required" remote="/dms/check-username.json" placeholder='<fmt:message key="msg.input-your"/><fmt:message key="msg.user-name"/>' ${param.mode}/>
	    		</div>	 
	    		<c:if test="${param.mode ne 'create'}">
		    		<div class="margin-top-dbl margin-bottom-half margin-left-dbl alert font-13 float-left ${param.mode}">
			    		<fmt:message key="msg.reset-password-desc"/>
		    		</div>	   		
	    		</c:if>  		
	    		<div class="input-item ${param.mode}">
		    		<label><fmt:message key="msg.password"/></label>
		    		<input type="password" value="" name="password" class="text-field password1 <c:if test="${param.mode eq 'create'}">required</c:if>" ${param.mode}/>
	    		</div>	   		
	    		<div class="input-item ${param.mode}">
		    		<label><fmt:message key="msg.password"/> <fmt:message key="msg.confirm"/></label>
		    		<input type="password" value="" name="password2" class="text-field <c:if test="${param.mode eq 'create'}">required</c:if>" equalTo=".password1" ${param.mode}/>
	    		</div>	   		
    		</div>
    		<div class="margin-left-dbl ${param.mode}">
    		<input type="submit" value='<fmt:message key="msg.submit"/>'/>	   		
    		<input type="reset" value='<fmt:message key="msg.reset"/>'/>	   		
    		</div>
  		</form>
